<!--
 * @Author: wang_jl
 * @Date: 2021-07-28 13:11:56
 * @LastEditTime: 2021-12-29 19:27:14
 * @LastEditors: Please set LastEditors
 * @Description: 编辑密码页
-->
<template>
  <div class="change_pan">
    <div
      v-if="editFormVisible"
      class="editPwdForm"
    >
      <div style="text-align: center">
        <img
          src="@/assets/img/login/edit.png"
          alt=""
        >
        <div style="margin: 36px 0">
          {{ LANG.RESET_PASSWORD }}
        </div>
      </div>
      <fks-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="120px"
      >
        <fks-form-item
          :label="LANG.OLD_PASSWORD"
          class="form-group"
          prop="oldPassword"
        >
          <fks-input
            v-model="form.oldPassword"
            show-password
            maxlength="50"
            :placeholder="LANG.CURRENT_PWD_TIP"
          />
        </fks-form-item>
        <fks-form-item
          :label="LANG.NEW_PASSWORD"
          class="form-group"
          prop="newPassword"
        >
          <span slot="label">
            {{ LANG.NEW_PASSWORD }}
            <fks-tooltip placement="right">
              <div
                slot="content"
                style="font-size: 14px; line-height: 20px"
                class="tips-container"
              >
                <span style="font-size: 14px">
                  {{ LANG.PASSWORD_TIP }}{{ accountConfig.pwMinLength }}-{{
                    accountConfig.pwMaxLength
                  }}
                </span>
                <span
                  v-if="
                    accountConfig.charDemand == '1' &&
                      accountConfig.passwordLevel == 'custom'
                  "
                >{{ LANG.PASSWORD_TIP1 }}</span>
                <span
                  v-if="
                    accountConfig.charDemand == '2' &&
                      accountConfig.passwordLevel == 'custom'
                  "
                >{{ LANG.PASSWORD_TIP2 }}</span>
                <span
                  v-if="
                    accountConfig.charDemand == '3' &&
                      accountConfig.passwordLevel == 'custom'
                  "
                >{{ LANG.PASSWORD_TIP3 }}</span>
                <span v-if="accountConfig.sensitiveInfo == true">{{
                  LANG.SENSITIVE_INFO_TIP
                }}</span>
              </div>
              <i class="fks-icon-question" />
            </fks-tooltip>
          </span>
          <fks-input
            v-model="form.newPassword"
            show-password
            maxlength="50"
            :placeholder="LANG.NEW_PWD_TIP"
          />
        </fks-form-item>

        <fks-form-item
          :label="LANG.CONFIRM_PASSWORD"
          class="form-group"
          prop="newPasswords"
        >
          <fks-input
            v-model="form.newPasswords"
            show-password
            maxlength="50"
            :placeholder="LANG.CONFIRM_PWD_TIP"
            @keyup.enter.native="submit"
          />
        </fks-form-item>
      </fks-form>
      <div class="btn-container">
        <fks-button
          type="primary"
          :loading="submitLoading"
          @click="submit"
        >
          {{ LANG.CONFIRM }}
        </fks-button>
        <fks-button
          text
          class="back"
          @click="backToPersonalCenter"
        >
          {{ LANG.BACK_TO_PERSONAL_CENTER }}
        </fks-button>
      </div>
    </div>
    <div
      v-if="resetSuccessVisible"
      class="resetSuccess"
    >
      <img
        src="@/assets/img/login/success.png"
        alt=""
      >
      <div style="margin-top: 28px">
        {{ LANG.RESET_SUCCESS }}
      </div>
      <fks-button
        type="primary"
        @click="backToPersonalCenter"
      >
        {{ LANG.BACK_TO_PERSONAL_CENTER }}
      </fks-button>
    </div>
  </div>
</template>
<script>
import * as Home from '../api'
import { pwdEncrypt } from '@/utils/encryption/pwd'
import { mapState } from 'vuex'
import * as stateTypes from '@/store/State/stateTypes'
import { UPDATE_USER } from '@/store/Action/actionTypes'
import { pwdRuleCheck } from '@/utils/password'
export default {
  name: 'EditPassword',
  data() {
    return {
      editFormVisible: true,
      resetSuccessVisible: false,
      form: {
        oldPassword: '',
        newPassword: '',
        newPasswords: ''
      },
      submitLoading: false
    }
  },
  computed: {
    rules() {
      return {
        oldPassword: [
          {
            required: true,
            message: this.LANG.OLD_PASSWOED_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        newPassword: [
          {
            required: true,
            message: this.LANG.NEW_PASSWORD_NOT_EMPTY,
            trigger: 'blur'
          }
        ],
        newPasswords: [
          {
            required: true,
            message: this.LANG.NEW_PASSWORDS_NOT_EMPTY,
            trigger: 'blur'
          }
        ]
      }
    },
    ...mapState([stateTypes.ACCOUNT_CONFIG])
  },
  methods: {
    //切换重置成功页面
    goResetSuccess() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.editFormVisible = false
          this.resetSuccessVisible = true
        }
      })
    },
    //提交修改密码
    submit() {
      this.submitLoading = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (pwdRuleCheck(this.form.newPassword)) {
            if (this.form.newPassword == this.form.newPasswords) {
              let data = {
                newPwd: pwdEncrypt(this.form.newPassword),
                oldPwd: pwdEncrypt(this.form.oldPassword)
              }
              Home.editPassword(data)
                .then((res) => {
                  if (res.status) {
                    this.$message.success(this.LANG.EDIT_SUCCESS)
                    this.$store.dispatch(UPDATE_USER)
                    // this.cancel();
                    this.goResetSuccess()
                  }
                  this.submitLoading = false
                })
                .catch((err) => {
                  this.submitLoading = false
                })
            } else {
              this.submitLoading = false
              this.$message.error(this.LANG.DIFFERENT_PASSWORD)
            }
          } else {
            this.submitLoading = false
            this.$message.error(this.LANG.PASSWORD_VALID_TIP)
          }
        } else {
          this.submitLoading = false
        }
      })
    },
    //返回个人中心页面
    backToPersonalCenter() {
      this.$parent.editPasswordVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.change_pan {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.editPwdForm {
  width: 370px;
  margin: 0 auto;

  ::v-deep .fks-form-item__label {
    height: 40px;
    font-size: 14px;
    line-height: 40px !important;
  }

  ::v-deep .fks-form-item {
    .fks-input__inner {
      height: 40px;
      padding-right: 0;
      padding-left: 0;
      border: 1px solid rgba(225, 226, 228, 1);
      border-radius: 4px;
      font-size: 16px;
      text-indent: 16px;
      background: rgba(255, 255, 255, 1);
    }
  }

  .btn-container {
    width: 340px;
    margin: 56px auto 0;

    ::v-deep .fks-button {
      width: 340px;
      height: 52px;
      font-size: 18px;
      margin: 0;
    }
  }
}

.back {
  font-size: 14px !important;
}

.resetSuccess {
  width: 370px;
  margin: 0 auto;
  text-align: center;

  ::v-deep .fks-button {
    width: 340px;
    height: 52px;
    margin-top: 72px;
    font-size: 18px;
  }
}
</style>